<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="common/css/jquery-weui.min.css" />
		<link rel="stylesheet" type="text/css" href="common/css/weui.min.css" />
		<link rel="stylesheet" type="text/css" href="common/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="common/css/loading.css" />
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				background-color: #F3F5F7;
				font-family: "微软雅黑";
			}
			
			.header {
				height: 45px;
				line-height: 45px;
				background: #f9f9f9;
				color: #616161;
				font-size: 18px;
				border-bottom: 1px solid #bbb;
				text-align: center;
				position: fixed;
				top: 0px;
				left: 0px;
				width: 100%;
				z-index: 1000;
			}
			
			.header .icon {
				width: 20px;
				position: absolute;
				left: 10px;
			}
			
			.detailInfo {
				display: -webkit-box;
				background-color: white;
				-webkit-box-orient: vertical;
			}
			
			.detailName {
				display: -webkit-box;
				font-size: 16px;
				color: #232326;
				line-height: 20px;
				margin-top: 3px;
			}
			
			.detailPrice {
				display: -webkit-box;
				font-size: 20px;
				line-height: 20px;
				margin-top: 8px;
				color: #F02B2B;
				font-weight: bold;
			}
			
			.detailAdv {
				display: -webkit-box;
				font-size: 13px;
				color: #81838e;
				margin: 8px 10px 0 0;
			}
			
			.detailAdv,
			.detailName,
			.detailPrice {
				margin-left: 5px;
			}
			
			.greyBg {
				width: 100%;
				height: 120%;
				min-height: 100%;
				position: fixed;
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 200;
			}
			
			.type {
				display: -webkit-box;
				height: 45px;
				margin-top: 10px;
				background-color: white;
				-webkit-box-align: center;
				text-indent: 10px;
				font-size: 13px;
				color: #81838e;
			}
			
			.type .chosen {
				display: -webkit-box;
				-webkit-box-flex: 1;
				font-size: 13px;
				color: #252525;
			}
			
			.hidden {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 70%;
				background-color: #fff;
				border-top: 1px solid #dadada;
				z-index: 250;
			}
			
			.hidden .hiddenImg {
				position: absolute;
				left: 8px;
				top: -26px;
				width: 100px;
				height: 100px;
				border-radius: 3px;
				border: 1px solid #f0f1f3;
				background-color: #fff;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-pack: center;
				-webkit-box-align: center;
			}
			
			.hidden .hiddenImg img {
				max-width: 100%;
				max-height: 100%;
				overflow: hidden;
			}
			
			.hidden .close {
				display: block;
				width: 40px;
				height: 40px;
				position: absolute;
				top: 0;
				right: 0;
			}
			
			.hidden .top {
				width: 100%;
				height: 84px;
				border-bottom: 1px solid #dcdcdc;
			}
			
			.hidden .top .price {
				font-size: 15px;
				line-height: 15px;
				color: #f23030;
				padding-top: 42px;
				padding-left: 121px;
				font-weight: bold;
			}
			
			.hidden .top .price span: {
				font-size: 15px;
				line-height: 15px;
				color: #f23030;
				font-weight: bold;
			}
			
			.hidden .close p {
				display: block;
				background: url(img/product-detail-sprites-mjs.png?v=1) no-repeat 0 0;
				background-size: 100px 100px;
				background-position: -28px -17px;
				width: 11px;
				height: 12px;
				position: absolute;
				right: 10px;
				top: 16px;
			}
			
			.hidden .middle {
				position: absolute;
				bottom: 43px;
				top: 85px;
				left: 0;
				right: 0;
				padding-left: 10px;
				overflow: auto;
			}
			
			.hidden .middle .now {
				font-size: 0;
				overflow: hidden;
				position: relative;
			}
			
			.middle .changePro {
				height: auto;
				padding-top: 15px;
				font-size: 0;
				padding-bottom: 15px;
			}
			
			.spanleft {
				display: inline-block;
				font-size: 13px;
				color: #81838e;
				width: 26px;
				white-space: normal;
				height: auto;
				float: left;
			}
			
			.spanlineheight1 {
				line-height: 18px;
			}
			
			.spanlineheight2 {
				line-height: 23px;
			}
			
			.spanlineheight2 {
				line-height: 26px;
			}
			
			.hidden .typeNum {
				margin-left: 34px;
				font-size: 13px;
				color: #252525;
				line-height: 15px;
			}
			
			.hidden .typeNum>span {
				font-size: 13px;
				color: #252525;
				margin-right: 5px;
			}
			
			.hidden .color {
				font-size: 0;
				overflow: hidden;
				position: relative;
				margin-top: 13px;
			}
			
			.hidden .color p {
				margin-left: 34px;
				overflow: hidden;
			}
			
			.hidden .color p>a {
				height: 27px;
				border: 1px solid #bfbfbf;
				border-radius: 4px;
				line-height: 25px;
				font-size: 13px;
				color: #232326;
				float: left;
				margin-right: 10px;
				padding-left: 20px;
				padding-right: 20px;
				margin-bottom: 5px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				min-width: 69px;
				max-width: 98%;
				box-sizing: border-box;
				text-align: center;
				border: 1px solid #f23030;
				color: #f23030;
			}
			
			.count {
				font-size: 0;
				height: 27px;
				position: relative;
				margin-top: 12px;
			}
			
			.count .num {
				height: 26px;
				border-radius: 5px;
				margin-left: 8px;
				float: left;
				width: 100px;
				line-height: 26px;
			}
			
			.count .num .icon {
				width: 26px;
				height: 26px;
				color: #232326;
				border: 1px solid #bfbfbf;
				text-align: center;
				line-height: 26px;
				float: left;
				font-size: 16px;
			}
			
			.count .num input {
				color: #232326;
				border: solid #bfbfbf;
				border-width: 1px 0 1px 0;
				height: 28px;
				line-height: 28px;
				width: 26px;
				border-radius: 0;
				text-align: center;
				-webkit-appearance: none;
				box-sizing: border-box;
				float: left;
			}
			
			.bottom {
				display: -webkit-box;
				width: 100%;
				font-size: 0;
				position: absolute;
				bottom: 0;
				left: 0;
				overflow: hidden;
			}
			
			.bottom a {
				display: block;
				height: 43px;
				width: 1%;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-webkit-flex: 1;
				-ms-flex: 1;
				flex: 1;
				font-size: 15px;
				line-height: 43px;
				color: #fff;
				text-align: center;
			}
			
			.bottom .buy {
				background-color: #ffb03f;
			}
			
			.bottom .cart {
				background-color: #f23030;
			}
			
			.fixed {
				display: -webkit-box;
				position: fixed;
				left: 0;
				bottom: 0;
				z-index: 10;
				text-align: center;
				width: 100%;
				height: 50px;
			}
			
			.fixed .cart,
			.fixed .fav,
			.fixed .logo {
				width: 60px;
				height: 50px;
				display: -webkit-box;
				background-color: rgba(255, 255, 255, 0.8);
				-webkit-box-orient: vertical;
			}
			
			.fixed .buynow,
			.fixed .addcart {
				display: -webkit-box;
				height: 50px;
				-webkit-box-flex: 1;
				font-size: 15px;
				-webkit-box-align: center;
				-webkit-box-pack: center;
				color: white;
			}
			
			.fixed .buynowbg {
				background-color: #ffb03f;
			}
			
			.fixed .addcartbg {
				background-color: #f23030;
			}
			
			.fixed span {
				background-size: 100px 100px;
				width: 22px;
				height: 21px;
				display: block;
				margin: 0 auto;
				background-color: #fff;
				margin-top: 10px;
				margin-bottom: 4px;
				background: url(img/cart_sprits_all.png) 0 0 no-repeat;
				background-size: 100px 100px;
				position: relative;
			}
			
			.fixed .logo span {
				background-position: -26px -21px;
			}
			
			.fixed .cart span {
				background-position: 0 -21px;
			}
			
			.fixed .fav span {
				background-position: -50px -3px;
			}
			
			.fixed .logo>div,
			.fixed .cart>div,
			.fixed .fav>div {
				line-height: 15px;
				height: 15px;
				text-align: center;
				color: #232326;
				font-size: 12px;
			}
			
			.desc {
				display: -webkit-box;
				overflow: hidden;
				margin-top: 10px;
				margin-bottom: 45px;
			}
			
			.desc img {
				width: 100%;
			}
			
			.address {
				display: -webkit-box;
				height: 90px;
				margin-top: 10px;
				background-color: white;
				-webkit-box-orient: vertical;
			}
			
			.address>div:nth-child(1) {
				display: -webkit-box;
				font-size: 13px;
				color: #81838e;
				height: 15px;
				-webkit-box-align: center;
				margin: 10px 0 0 10px;
			}
			
			.address>div:nth-child(2) {
				display: -webkit-box;
				font-size: 13px;
				height: 15px;
				-webkit-box-align: center;
				/*-webkit-box-pack: center;*/
				margin: 12px 0 0 40px;
				color: #ff2030;
			}
			
			.address>div:nth-child(3) {
				display: -webkit-box;
				font-size: 13px;
				color: #81838e;
				height: 15px;
				-webkit-box-align: center;
				/*-webkit-box-pack: center;*/
				margin: 12px 0 0 10px;
			}
			
			.isclose {
				display: none;
			}
			
			body .weui-toast {
				-webkit-transition-duration: .2s;
				transition-duration: .2s;
				opacity: 0;
				-webkit-transform: scale(.9) translate(-50%, -50%) !important;
				transform: scale(.9) translate(-50%, -50%) !important;
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				visibility: hidden;
				margin: 0;
				top: 45%;
				z-index: 2000
			}
		</style>
		<script src="common/js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="common/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="common/js/base.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body ontouchstart>
		<div class="csshub-loading" v-if="isLoading">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
		<div v-for="item in productItem" v-if="!isLoading">
			<div class="header">
				<i class="icon Hui-iconfont" @click="back">&#xe6d4;</i>商品详情
			</div>
			<div class="banner" style="margin-top: 45px;">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img v-bind:src="item.attributes.image[0]" width="100%" /></div>
						<div class="swiper-slide"><img v-bind:src="item.attributes.image[1]" width="100%" /></div>
						<div class="swiper-slide"><img v-bind:src="item.attributes.image[2]" width="100%" /></div>
						<div class="swiper-slide"><img v-bind:src="item.attributes.image[3]" width="100%" /></div>
						<div class="swiper-slide"><img v-bind:src="item.attributes.image[4]" width="100%" /></div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div class="detailInfo">
				<div class="detailName" v-html="item.attributes.title">
				</div>
				<div class="detailPrice">
					￥<span v-html="item.attributes.price[0]"></span>
				</div>
				<div class="detailAdv" v-html="item.attributes.adv">
				</div>
			</div>
			<div class="type" @click="showhidden">
				已选：
				<div class="chosen">
					<div v-html="item.attributes.style[0]"></div>
					<div v-html="num"></div>件
				</div>
			</div>
			<div class="address">
				<div>送至：北京 朝阳区 管庄</div>
				<div>现货，23：00前完成下单预计明天送达</div>
				<div>重量：0.27kg</div>
			</div>
			<div class="desc" v-html="item.attributes.description">
			</div>
			<div class="fixed">
				<div class="logo">
					<span></span>
					<div>JIMI</div>
				</div>
				<div class="fav" @click="setfav">
					<span></span>
					<div>收藏</div>
				</div>
				<div class="cart" @click="linkcart">
					<span></span>
					<div>购物车</div>
				</div>
				<div class="buynow buynowbg" @click="setcart">加入购物车</div>
				<div class="addcart addcartbg" @click="buynow">立刻购买</div>
			</div>

			<!--灰色背景-->
			<div class="greyBg" v-bind:class="{'isclose':isClose}">
			</div>

			<!--隐藏层-->
			<div class="hidden" v-bind:class="{'isclose':isClose}">
				<div class="hiddenImg">
					<img v-bind:src="item.attributes.image[0]" />
				</div>
				<a class="close" @click="closehidden">
					<p class=""></p>
				</a>
				<div class="top">
					<div class="price">
						<span>￥</span>
						<span v-html="item.attributes.price[0]"></span>
					</div>
				</div>
				<div class="middle">
					<div class="changePro">
						<div class="now">
							<span class="spanleft spanlineheight1">已选</span>
							<div class="typeNum">
								<span class="amount" v-html="item.attributes.style[0]"></span>
								<span class="amount" v-html="num"></span>件
							</div>
						</div>
						<!--<div style="clear: both;"></div>-->
						<div class="color">
							<span class="spanleft spanlineheight2">规格</span>
							<p>
								<a href="javascript:void(0)" v-html="item.attributes.style[0]"></a>
							</p>
						</div>
						<div class="count">
							<span class="spanleft spanlineheight2">数量</span>
							<div class="num">
								<div class="icon Hui-iconfont" @click="addnum">&#xe600;</div>
								<input type="text" id="num" v-model="num" />
								<div class="icon Hui-iconfont" @click="delnum">&#xe6a1;</div>
							</div>
						</div>
					</div>
				</div>
				<div class="bottom">
					<a class="buy" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">加入购物车</a>
					<a class="cart" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">立刻购买</a>
				</div>
			</div>
		</div>

		<script src="common/js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="common/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="common/js/fastclick.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				FastClick.attach(document.body);
			});
		</script>
		<script src="common/js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="vue/detailVue.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>